<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<div id="container" style="min-width:400px;height:400px"></div>
<div id="container2" style="height: 400px;margin-top: 30px;"></div>
<script>
$(function () {
    $('#container').highcharts({
    	credits: {
            enabled:false
 		},
        chart: {
            type: 'column'
        },
        title: {
            text: '各城市月平均就业人数'
        },
        subtitle: {
            text: '数据来源: TR就业部'
        },
        xAxis: {
            categories: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月'
            ],
            crosshair: true
        },
        yAxis: {
        	tickInterval: 5,
            min: 0,
            title: {
                text: '人数(个)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0,
                borderWidth: 0
            }
        },
        series: [{
            name: '株洲',
            data: [${count[0].株洲},${count[1].株洲},${count[2].株洲},${count[3].株洲},${count[4].株洲},${count[5].株洲},${count[6].株洲},${count[7].株洲},${count[8].株洲},${count[9].株洲},${count[10].株洲},${count[11].株洲},${count[12].株洲}]
        }, {
            name: '上海',
            data: [${count[0].上海},${count[1].上海},${count[2].上海},${count[3].上海},${count[4].上海},${count[5].上海},${count[6].上海},${count[7].上海},${count[8].上海},${count[9].上海},${count[10].上海},${count[11].上海},${count[12].上海}]
        }, {
            name: '广州',
            data: [${count[0].广州},${count[1].广州},${count[2].广州},${count[3].广州},${count[4].广州},${count[5].广州},${count[6].广州},${count[7].广州},${count[8].广州},${count[9].广州},${count[10].广州},${count[11].广州},${count[12].广州}]
        }, {
            name: '其他',
            data: [${count[0].其他},${count[1].其他},${count[2].其他},${count[3].其他},${count[4].其他},${count[5].其他},${count[6].其他},${count[7].其他},${count[8].其他},${count[9].其他},${count[10].其他},${count[11].其他},${count[12].其他}]
        }]
    });
});
</script>
<script type="text/javascript">
$(function () {
    $('#container2').highcharts({
    	credits: {  
            enabled:false  
 		},
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
        title: {
            text: '男女就业比例图'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35,
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                }
            }
        },
        series: [{
            type: 'pie',
            name: '占比',
            data: [
                ['男生'+${nan}+'个', ${nan}],
                {
                    name: '女生'+${nv}+'个',
                    y: ${nv},
                    sliced: true,
                    selected: true
                }
            ]
        }]
    });
});

</script>

